<template>
	<div class="home-banner header-fixed-top">
		<swiper :options="swiperOption">
			<swiper-slide 
						v-show='BannImgLoad' 
						v-for='item of bannerList' 
						:key='item._id'
			>
				<router-link tag='div' :to="'/detail/' + item._id + '/hot'">
					<img @load="imgLoad" class="banner-img" :src="item.url" />
				</router-link>
				<div class="banner-desc">
					<div class="desc-box">
						<p class="desc-p">
							{{item.desc}}
						</p>
					</div>
				</div>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: 'home-banner',
		data () {
			return {
				BannImgLoad: false,
				swiperOption: {
					loop: true,
					autoplay: 3000,
					initialSlide: 0,
					pagination: '.swiper-pagination',
					// 数字分页器
					// paginationType: 'fraction',
					observeParents: true,
					observer: true
				},
				bannerList: [
						{
							"_id": "5cb038798b364080c9015494",
							"url": require("../../../assets/images/01.jpg"),
							"desc": "征集：一起发现春天的色彩"
						},
						{
							"_id": "5cb03f9a8b364080c901572a",
							"url": require("../../../assets/images/02.jpg"),
							"desc": "普吉海域快艇撞船11名中国游客受伤"
						},
						{	
							"_id": "5cb041718b364080c90157c8",
							"url": require("../../../assets/images/04.jpg"),
							"desc": "征集：拿起相机丈量世界的尺度"
						},
						{
							"_id": "5cb042f48b364080c9015850",
							"url": require("../../../assets/images/06.jpg"),
							"desc": "美图：又是一年好春光",
						},
						{
							"_id": "5cb046438b364080c9015996",
							"url": require("../../../assets/images/05.jpg"),
							"desc": "摄影：换个角度俯瞰各地城市之美"
						}	
				]
			}
		},
		methods: {
			imgLoad () {
				this.BannImgLoad = true
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/minxins.styl'
	.home-banner >>> .swiper-wrapper
		position:relative
		z-index:-1
	// 数字分页器样式
	/*.home-banner >>> .swiper-pagination-fraction
		width:80px
		height:28px
		float:left
		color:#fff*/
	.home-banner >>> .swiper-pagination
		float:left
		margin-bottom:34px
	.home-banner >>> .swiper-pagination-bullet
		width:12px
		height:12px
		// background:#575554
		float:left
		margin-left:12px
		background:#c4c4c4
	.home-banner >>> .swiper-pagination-bullet:first-child
		margin-left:22px
	.home-banner >>> .swiper-pagination-bullet-active
		width:34px
		height:12px
		border-radius:12px
		background:#ff9343
	.home-banner
		height:0
		overflow:hidden
		padding-bottom:47.8%
		/*padding-bottom:56.14% */
		background:#F6F6F6
		.banner-img
			width:100%
		.banner-desc
			position:absolute
			width:100%
			bottom:0
			right:0
			height:68px
			overflow:hidden
			background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.9))
			.desc-box
				height:68px
				float:right
			.desc-p
				ellipsis()
				color:#fff
				font-size:32px
				float:right
				line-height:32px
				margin-right:16px
</style>
